﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>弹出模式框 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模式框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#modals" class="nav-link font-weight-bold"><span>弹出模式框(Modal)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>概述</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#toggle-modal-visibility" class="nav-link"><span>切换模式可见性</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-v-b-modal-directive" class="nav-link"><span>使用 v-b-modal 命令</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-thisbvmodalshow-and-thisbvmodalhide-instance-methods" class="nav-link"><span>使用 this.$bvModal.show() 和 this.$bvModal.hide()实例方法</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-show-hide-and-toggle-component-methods" class="nav-link"><span>使用 show(), hide(), 和 toggle()组件方法</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-v-model-property" class="nav-link"><span>使用 v-model 属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-scoped-slot-scope-methods" class="nav-link"><span>使用作用域插槽作用域方法</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#emitting-events-on-root" class="nav-link"><span>在$root上发出事件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#prevent-closing" class="nav-link"><span>防止关闭</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#modal-content" class="nav-link"><span>模式内容</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-the-grid" class="nav-link"><span>使用网格</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#tooltips-and-popovers" class="nav-link"><span>工具提示和弹出窗口</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#lazy-loading-and-static-modals" class="nav-link"><span>延迟加载和静态模式</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling-options-and-customization" class="nav-link"><span>样式、选项和自定义</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#modal-sizing" class="nav-link"><span>模式尺寸</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#scrolling-long-content" class="nav-link"><span>滚动长内容</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#vertically-centered-modal" class="nav-link"><span>垂直居中模式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#variants" class="nav-link"><span>变量</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#hiding-the-backdrop" class="nav-link"><span>隐藏背景</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disable-open-and-close-animation" class="nav-link"><span>禁用打开和关闭动画</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#footer-button-sizing" class="nav-link"><span>页脚按钮大小</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disabling-built-in-footer-buttons" class="nav-link"><span>禁用内置页脚按钮</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#custom-rendering-with-slots" class="nav-link"><span>带插槽的自定义渲染</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#multiple-modal-support" class="nav-link"><span>多模式支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#modal-message-boxes" class="nav-link"><span>模式消息框</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#ok-message-box" class="nav-link"><span>确认消息框</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#confirm-message-box" class="nav-link"><span>确认消息框 </span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#message-box-notes" class="nav-link"><span>消息框注释</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#message-box-advanced-usage" class="nav-link"><span>消息框高级用法</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#listening-to-modal-changes-via-root-events" class="nav-link"><span>通过$root事件监听模式更改</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>可访问性</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#modal-aria-attributes" class="nav-link"><span>模式 ARIA 属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-focus-on-open" class="nav-link"><span>打开时自动聚焦</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#returning-focus-to-the-triggering-element" class="nav-link"><span>将焦点返回到触发元素</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#keyboard-navigation" class="nav-link"><span>键盘导航</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#v-b-modal-directive-accessibility" class="nav-link"><span>v-b-modal 指令可访问性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-modal" class="nav-link"><span>&lt;b-modal&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-directives" class="nav-link"><span>Importing individual directives</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">弹出模式框</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">弹出模式框(Modal)</h1>
<p class="bd-lead">
  Modals是流线型的，但是由JavaScript和CSS提供灵活的对话框提示。它们支持许多用例，从用户通知到完全定制的内容，并具有一些有用的子组件、大小、变体、可访问性等特性。
</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#overview" class=""><span data-v-811345e6="">Overview</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#toggle-modal-visibility" class=""><span data-v-811345e6="">Toggle modal visibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-v-b-modal-directive" class=""><span data-v-811345e6="">Using v-b-modal directive</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-thisbvmodalshow-and-thisbvmodalhide-instance-methods" class=""><span data-v-811345e6="">Using this.$bvModal.show() and this.$bvModal.hide() instance methods</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-show-hide-and-toggle-component-methods" class=""><span data-v-811345e6="">Using show(), hide(), and toggle() component methods</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-v-model-property" class=""><span data-v-811345e6="">Using v-model property</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-scoped-slot-scope-methods" class=""><span data-v-811345e6="">Using scoped slot scope methods</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#emitting-events-on-root" class=""><span data-v-811345e6="">Emitting events on $root</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#prevent-closing" class=""><span data-v-811345e6="">Prevent closing</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#modal-content" class=""><span data-v-811345e6="">Modal content</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-the-grid" class=""><span data-v-811345e6="">Using the grid</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#tooltips-and-popovers" class=""><span data-v-811345e6="">Tooltips and popovers</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#lazy-loading-and-static-modals" class=""><span data-v-811345e6="">Lazy loading and static modals</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling-options-and-customization" class=""><span data-v-811345e6="">Styling, options, and customization</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#modal-sizing" class=""><span data-v-811345e6="">Modal sizing</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#scrolling-long-content" class=""><span data-v-811345e6="">Scrolling long content</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#vertically-centered-modal" class=""><span data-v-811345e6="">Vertically centered modal</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#variants" class=""><span data-v-811345e6="">Variants</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#hiding-the-backdrop" class=""><span data-v-811345e6="">Hiding the backdrop</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disable-open-and-close-animation" class=""><span data-v-811345e6="">Disable open and close animation</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#footer-button-sizing" class=""><span data-v-811345e6="">Footer button sizing</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabling-built-in-footer-buttons" class=""><span data-v-811345e6="">Disabling built-in footer buttons</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-rendering-with-slots" class=""><span data-v-811345e6="">Custom rendering with slots</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#multiple-modal-support" class=""><span data-v-811345e6="">Multiple modal support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#modal-message-boxes" class=""><span data-v-811345e6="">Modal message boxes</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#ok-message-box" class=""><span data-v-811345e6="">OK message box</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#confirm-message-box" class=""><span data-v-811345e6="">Confirm message box</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#message-box-notes" class=""><span data-v-811345e6="">Message box notes</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#message-box-advanced-usage" class=""><span data-v-811345e6="">Message box advanced usage</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#listening-to-modal-changes-via-root-events" class=""><span data-v-811345e6="">Listening to modal changes via $root events</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#modal-aria-attributes" class=""><span data-v-811345e6="">Modal ARIA attributes</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#auto-focus-on-open" class=""><span data-v-811345e6="">Auto focus on open</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#returning-focus-to-the-triggering-element" class=""><span data-v-811345e6="">Returning focus to the triggering element</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#keyboard-navigation" class=""><span data-v-811345e6="">Keyboard navigation</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-b-modal-directive-accessibility" class=""><span data-v-811345e6="">v-b-modal directive accessibility</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-modal" class=""><span data-v-811345e6="">&lt;b-modal&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-directives" class=""><span data-v-811345e6="">Importing individual directives</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-modal notranslate">
<div>
<button type="button" class="btn btn-secondary">Launch demo modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-1</span>&gt;</span>Launch demo modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-1"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"BootstrapVue"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-4"</span>&gt;</span>Hello from modal!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">概述<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>在默认情况下，在页脚中有一个<strong>确认</strong>和<strong>取消</strong>按钮。
  可以通过在组件上设置各种属性来自定义这些按钮。您可以自定义按钮的大小、禁用按钮、隐藏<strong>取消</strong>按钮（即<code translate="no" class="notranslate text-nowrap">ok-only</code>），
  使用<code translate="no" class="notranslate text-nowrap">ok 变量</code>和 
  <code translate="no" class="notranslate text-nowrap">cancel 变量</code>属性选择变量（如红色“确定”按钮有<code translate="no" class="notranslate text-nowrap">危险</code>），
  使用<code translate="no" class="notranslate text-nowrap">ok 标题</code>和
  <code translate="no" class="notranslate text-nowrap">cancel 标题</code>属性提供自定义按钮内容，或使用命名的插槽<code translate="no" class="notranslate text-nowrap">modal-ok</code>和
  <code translate="no" class="notranslate text-nowrap">modal-cancel</code>。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>支持按ESC键关闭（默认启用）、
  按背景关闭（默认启用）和页眉中的<code translate="no" class="notranslate text-nowrap">X</code>关闭按钮（默认启用）。
  通过分别设置<code translate="no" class="notranslate text-nowrap">“在esc上不关闭属性”</code>, 
  <code translate="no" class="notranslate text-nowrap">“在背景上不关闭属性”</code>, 和 
  <code translate="no" class="notranslate text-nowrap">“隐藏标题关闭属性”</code>，可以禁用这些功能。
</p>
<p>
  您可以通过命名的槽 <code translate="no" class="notranslate text-nowrap">modal-title</code>覆盖模式标题，
  通过<code translate="no" class="notranslate text-nowrap">modal-header</code>槽完全覆盖页眉，
  并通过<code translate="no" class="notranslate text-nowrap">modal-footer</code>槽完全覆盖页脚。
</p>
<p><strong>注意</strong>: 
  使用<code translate="no" class="notranslate text-nowrap">modal-footer</code> 槽时，默认的<strong>确定</strong> and <strong>取消</strong>按钮将不存在。
  此外，如果使用<code translate="no" class="notranslate text-nowrap">modal-header</code>槽，则默认标题<code translate="no" class="notranslate text-nowrap">X</code>关闭按钮将不存在，
  也不能使用<code translate="no" class="notranslate text-nowrap">modal-title</code>槽。
</p>
<p>
  Modals不会在文档中呈现它们的内容，除非它们被显示（延迟呈现）。当Modals可见时，<strong>它将被附加到<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>元素中</strong>。
  <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件的位置不会影响布局，
  因为它始终呈现为占位符注释节点（<code translate="no" class="notranslate text-nowrap">&lt;!----&gt;</code>). 您可以通过使用<a href="#lazy-loading-and-static-modals" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">static</code>属性</a>恢复到以前BootstrapVue版本的行为。
</p>
<h2 id="toggle-modal-visibility" class="bv-no-focus-ring"><span class="bd-content-title">切换模式可见性<a class="anchorjs-link" href="#toggle-modal-visibility" aria-labelledby="toggle-modal-visibility"></a></span></h2>
<p>
  有几种方法可用于切换<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>的可见性。
</p>
<h3 id="using-v-b-modal-directive" class="bv-no-focus-ring"><span class="bd-content-title">使用 <code translate="no" class="notranslate text-nowrap">v-b-modal</code> 命令<a class="anchorjs-link" href="#using-v-b-modal-directive" aria-labelledby="using-v-b-modal-directive"></a></span></h3>
<p>
  其他元素可以使用<code translate="no" class="notranslate text-nowrap">v-b-modal</code> 指令轻松显示模式。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-directive notranslate">
<div>
<button type="button" class="btn btn-secondary">Show Modal</button>
<button type="button" class="btn btn-secondary">Show Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- Using modifiers --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.my-modal</span>&gt;</span>Show Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- Using value --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal</span>=<span class="hljs-string">"'my-modal'"</span>&gt;</span>Show Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- The modal --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-modal"</span>&gt;</span>Hello From My Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>一旦模式关闭，此方法将自动将焦点返回到触发器元素（类似于默认的引导功能）。用于切换模式可见性的其他方法可能需要额外的代码来实现此可访问性功能。</p>
<p>
  有关详细信息，请参见下面的<a href="#accessibility" class="font-weight-bold">可访问性</a>功能部分。
</p>
<h3 id="using-thisbvmodalshow-and-thisbvmodalhide-instance-methods" class="bv-no-focus-ring"><span class="bd-content-title">使用 <code translate="no" class="notranslate text-nowrap">this.$bvModal.show()</code> 和 <code translate="no" class="notranslate text-nowrap">this.$bvModal.hide()</code>实例方法<a class="anchorjs-link" href="#using-thisbvmodalshow-and-thisbvmodalhide-instance-methods" aria-labelledby="using-thisbvmodalshow-and-thisbvmodalhide-instance-methods"></a></span></h3>
<p>
  当BootstrapVue作为插件安装或使用<code translate="no" class="notranslate text-nowrap">ModalPlugin</code>插件时，
  BootstrapVue将向每个Vue实例（组件、应用程序）注入<code translate="no" class="notranslate text-nowrap">$bvModal</code>对象。
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">this.$bvModal.show(id)</code></td>
<td>
  显示具有指定<code translate="no" class="notranslate text-nowrap">id</code>的模式</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">this.$bvModal.hide(id)</code></td>
<td> 隐藏具有指定<code translate="no" class="notranslate text-nowrap">id</code>的模式</td>
</tr>
</tbody>
</table>
</div>
<p>两个方法在被调用后立即返回。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-bv-modal-hide-show notranslate">
<div>
<button id="show-btn" type="button" class="btn btn-secondary">Open Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"show-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"$bvModal.show('bv-modal-example')"</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bv-modal-example"</span> <span class="hljs-attr">hide-footer</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:modal-title</span>&gt;</span>
      Using <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>$bvModal<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> Methods
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Hello From This Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">block</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"$bvModal.hide('bv-modal-example')"</span>&gt;</span>Close Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">this.$bvModal</code>对象还用<a href="#modal-message-boxes" class="font-weight-bold">显示模式消息框</a>。
</p>
<h3 id="using-show-hide-and-toggle-component-methods" class="bv-no-focus-ring"><span class="bd-content-title">使用 <code translate="no" class="notranslate text-nowrap">show()</code>, <code translate="no" class="notranslate text-nowrap">hide()</code>, 和 <code translate="no" class="notranslate text-nowrap">toggle()</code>组件方法<a class="anchorjs-link" href="#using-show-hide-and-toggle-component-methods" aria-labelledby="using-show-hide-and-toggle-component-methods"></a></span></h3>
<p>
  可以使用<code translate="no" class="notranslate text-nowrap">ref</code>属性访问modal，然后调用<code translate="no" class="notranslate text-nowrap">show()</code>, 
  <code translate="no" class="notranslate text-nowrap">hide()</code>或 
  <code translate="no" class="notranslate text-nowrap">toggle()</code>方法。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-methods notranslate">
<div>
<button id="show-btn" type="button" class="btn btn-secondary">Open Modal</button>
<button id="toggle-btn" type="button" class="btn btn-secondary">Toggle Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"show-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showModal"</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"toggle-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleModal"</span>&gt;</span>Toggle Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"my-modal"</span> <span class="hljs-attr">hide-footer</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Using Component Methods"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Hello From My Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span> <span class="hljs-attr">block</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"hideModal"</span>&gt;</span>Close Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-warning"</span> <span class="hljs-attr">block</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleModal"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      showModal() {
        <span class="hljs-keyword">this</span>.$refs[<span class="hljs-string">'my-modal'</span>].show()
      },
      hideModal() {
        <span class="hljs-keyword">this</span>.$refs[<span class="hljs-string">'my-modal'</span>].hide()
      },
      toggleModal() {
        <span class="hljs-comment">// We pass the ID of the button that we want to return focus to</span>
        <span class="hljs-comment">// when the modal has hidden</span>
        <span class="hljs-keyword">this</span>.$refs[<span class="hljs-string">'my-modal'</span>].toggle(<span class="hljs-string">'#toggle-btn'</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">hide()</code>方法接受一个可选的字符串<code translate="no" class="notranslate text-nowrap">trigger</code>器参数，
  用于定义触发模式关闭的内容。有关详细信息，请参阅下面的<a href="#prevent-closing" class="font-weight-bold">“防止关闭”</a>部分。
</p>
<p><strong>注意:</strong> 
  建议使用<code translate="no" class="notranslate text-nowrap">this.$bvModal.show()</code>和
  <code translate="no" class="notranslate text-nowrap">this.$bvModal.hide()</code>（）方法（在上一节中提到），而不要使用<code translate="no" class="notranslate text-nowrap">$ref</code>方法。
</p>
<h3 id="using-v-model-property" class="bv-no-focus-ring"><span class="bd-content-title">使用 <code translate="no" class="notranslate text-nowrap">v-model</code> 属性<a class="anchorjs-link" href="#using-v-model-property" aria-labelledby="using-v-model-property"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">v-model</code>属性总是与<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code> 可见状态自动同步，
    您可以使用<code translate="no" class="notranslate text-nowrap">v-model</code>显示/隐藏。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-v-model notranslate">
<div>
<button type="button" class="btn btn-secondary">Open Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"modalShow = !modalShow"</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"modalShow"</span>&gt;</span>Hello From Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">modalShow</span>: <span class="hljs-literal">false</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  使用<code translate="no" class="notranslate text-nowrap">v-model</code>属性时，<strong>不要</strong>同时使用<code translate="no" class="notranslate text-nowrap">visible</code>属性。
</p>
<h3 id="using-scoped-slot-scope-methods" class="bv-no-focus-ring"><span class="bd-content-title">使用作用域插槽作用域方法<a class="anchorjs-link" href="#using-scoped-slot-scope-methods" aria-labelledby="using-scoped-slot-scope-methods"></a></span></h3>
<p>
  请参阅使用传递给作用域插槽的各种方法关闭模式的 <a href="#custom-rendering-with-slots" class="font-weight-bold">使用插槽自定义呈现</a> 部分。
</p>
<h3 id="emitting-events-on-root" class="bv-no-focus-ring"><span class="bd-content-title">在$root上发出事件<a class="anchorjs-link" href="#emitting-events-on-root" aria-labelledby="emitting-events-on-root"></a></span></h3>
<p>
  您可以在<code translate="no" class="notranslate text-nowrap">$root</code>上发出<code translate="no" class="notranslate text-nowrap">bv::show::modal</code>,
  <code translate="no" class="notranslate text-nowrap">bv::hide::modal</code>,和
  <code translate="no" class="notranslate text-nowrap">bv::toggle::modal</code>事件，第一个参数设置为modal的id。可选的第二个参数可以指定在关闭modal后返回焦点的元素。第二个参数可以是CSS选择器、元素引用或组件引用（组件的根元素将被聚焦）。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showModal"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"btnShow"</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleModal"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"btnToggle"</span>&gt;</span>Toggle Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>&gt;</span>Hello From My Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"hideModal"</span>&gt;</span>Close Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleModal"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">methods</span>: {
    showModal() {
      <span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::modal'</span>, <span class="hljs-string">'modal-1'</span>, <span class="hljs-string">'#btnShow'</span>)
    },
    hideModal() {
      <span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::hide::modal'</span>, <span class="hljs-string">'modal-1'</span>, <span class="hljs-string">'#btnShow'</span>)
    },
    toggleModal() {
      <span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::toggle::modal'</span>, <span class="hljs-string">'modal-1'</span>, <span class="hljs-string">'#btnToggle'</span>)
    }
  }
}</pre></figure>
<p><strong>注意:</strong> 
  建议使用<code translate="no" class="notranslate text-nowrap">this.$bvModal.show()</code>和
  <code translate="no" class="notranslate text-nowrap">this.$bvModal.hide()</code>方法（在上一节中提到）而不是发出<code translate="no" class="notranslate text-nowrap">$root</code>事件。
</p>
<h3 id="prevent-closing" class="bv-no-focus-ring"><span class="bd-content-title">防止关闭<a class="anchorjs-link" href="#prevent-closing" aria-labelledby="prevent-closing"></a></span></h3>
<p>
  以防止<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>关闭（例如验证失败时）。
  <code translate="no" class="notranslate text-nowrap">ok</code> (<strong>确认</strong> 按钮), 
  <code translate="no" class="notranslate text-nowrap">cancel</code> (<strong>取消</strong> 按钮), 
  <code translate="no" class="notranslate text-nowrap">close</code> (模式头关闭按钮)和
  <code translate="no" class="notranslate text-nowrap">hide</code>
  事件处理程序的事件对象的<code translate="no" class="notranslate text-nowrap">.preventDefault()</code>方法。请注意，
  使用时<strong>必须</strong>同步调用<code translate="no" class="notranslate text-nowrap">.preventDefault()</code>，因为不支持异步。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-prevent-closing notranslate">
<div>
<button type="button" class="btn btn-secondary">Open Modal</button>
<div class="mt-3"> Submitted Names:
<div>--</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-prevent-closing</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      Submitted Names:
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"submittedNames.length === 0"</span>&gt;</span>--<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-else</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0 pl-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"name in submittedNames"</span>&gt;</span>{{ name }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-prevent-closing"</span>
      <span class="hljs-attr">ref</span>=<span class="hljs-string">"modal"</span>
      <span class="hljs-attr">title</span>=<span class="hljs-string">"Submit Your Name"</span>
      @<span class="hljs-attr">show</span>=<span class="hljs-string">"resetModal"</span>
      @<span class="hljs-attr">hidden</span>=<span class="hljs-string">"resetModal"</span>
      @<span class="hljs-attr">ok</span>=<span class="hljs-string">"handleOk"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"form"</span> @<span class="hljs-attr">submit.stop.prevent</span>=<span class="hljs-string">"handleSubmit"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">:state</span>=<span class="hljs-string">"nameState"</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Name"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"name-input"</span>
          <span class="hljs-attr">invalid-feedback</span>=<span class="hljs-string">"Name is required"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"name-input"</span>
            <span class="hljs-attr">v-model</span>=<span class="hljs-string">"name"</span>
            <span class="hljs-attr">:state</span>=<span class="hljs-string">"nameState"</span>
            <span class="hljs-attr">required</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">name</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">nameState</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">submittedNames</span>: []
      }
    },
    <span class="hljs-attr">methods</span>: {
      checkFormValidity() {
        <span class="hljs-keyword">const</span> valid = <span class="hljs-keyword">this</span>.$refs.form.checkValidity()
        <span class="hljs-keyword">this</span>.nameState = valid
        <span class="hljs-keyword">return</span> valid
      },
      resetModal() {
        <span class="hljs-keyword">this</span>.name = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.nameState = <span class="hljs-literal">null</span>
      },
      handleOk(bvModalEvt) {
        <span class="hljs-comment">// Prevent modal from closing</span>
        bvModalEvt.preventDefault()
        <span class="hljs-comment">// Trigger submit handler</span>
        <span class="hljs-keyword">this</span>.handleSubmit()
      },
      handleSubmit() {
        <span class="hljs-comment">// Exit when the form isn't valid</span>
        <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.checkFormValidity()) {
          <span class="hljs-keyword">return</span>
        }
        <span class="hljs-comment">// Push the name to submitted names</span>
        <span class="hljs-keyword">this</span>.submittedNames.push(<span class="hljs-keyword">this</span>.name)
        <span class="hljs-comment">// Hide the modal manually</span>
        <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
          <span class="hljs-keyword">this</span>.$bvModal.hide(<span class="hljs-string">'modal-prevent-closing'</span>)
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>注意</strong>: 
  事件<code translate="no" class="notranslate text-nowrap">ok</code>, 
  <code translate="no" class="notranslate text-nowrap">cancel</code>,和 
  <code translate="no" class="notranslate text-nowrap">close</code>分别由modal的内置<strong>OK</strong>, <strong>Cancel</strong>,和header close (<strong>X</strong>)按钮发出。
  默认情况下，如果在<code translate="no" class="notranslate text-nowrap">modal-footer</code>槽中提供了自己的按钮或<code translate="no" class="notranslate text-nowrap">隐藏</code>了页脚，
  则不会发出这些事件。在这种情况下，使用<code translate="no" class="notranslate text-nowrap">hide</code>事件来控制取消模式关闭。
  即使发出<code translate="no" class="notranslate text-nowrap">确定</code>, 
  <code translate="no" class="notranslate text-nowrap">取消</code>,和
  <code translate="no" class="notranslate text-nowrap">关闭</code>，也始终发出“事件隐藏”。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">ok</code>,
   <code translate="no" class="notranslate text-nowrap">cancel</code>, 
   <code translate="no" class="notranslate text-nowrap">close</code> 和
   <code translate="no" class="notranslate text-nowrap">hide</code>事件对象（<code translate="no" class="notranslate text-nowrap">BvModalEvent</code>）包含几个属性和方法：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性或方法</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">preventDefault()</code></td>
<td>Method</td>
<td>调用时阻止模式关闭</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">trigger</code></td>
<td>属性</td>
<td>
  将是：<code translate="no" class="notranslate text-nowrap">ok</code> (默认单击<strong>确定</strong>), 
  <code translate="no" class="notranslate text-nowrap">cancel</code> (默认单击<strong>取消</strong>), 
  <code translate="no" class="notranslate text-nowrap">esc</code> (如果按了<kbd class="notranslate" translate="no">ESC</kbd>键),
   <code translate="no" class="notranslate text-nowrap">backdrop</code> (如果单击了backdrop), 
   <code translate="no" class="notranslate text-nowrap">headerclose</code> (如果单击了header X按钮)、
   提供给<code translate="no" class="notranslate text-nowrap">hide()</code>方法的第一个参数，否则为<code translate="no" class="notranslate text-nowrap">null</code>。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">target</code></td>
<td>属性</td>
<td>对模式元素的引用</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">vueTarget</code></td>
<td>属性</td>
<td>对模式的Vue VM实例的引用</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">componentId</code></td>
<td>属性</td>
<td>模式的ID</td>
</tr>
</tbody>
</table>
</div>
<p>
  您可以通过向高级控件的组件<code translate="no" class="notranslate text-nowrap">hide()</code>方法传递一个参数来设置<code translate="no" class="notranslate text-nowrap">trigger</code>的值（即检测哪个按钮或操作触发了要隐藏的模式）。
</p>
<p><strong>注意:</strong> 
  仅当<code translate="no" class="notranslate text-nowrap">hide()</code>的参数分别严格为<code translate="no" class="notranslate text-nowrap">ok</code>, 
  <code translate="no" class="notranslate text-nowrap">cancel</code>,或
  <code translate="no" class="notranslate text-nowrap">close</code>时，
  才会发出<code translate="no" class="notranslate text-nowrap">'ok'</code>, 
  <code translate="no" class="notranslate text-nowrap">'cancel'</code>, or 
  <code translate="no" class="notranslate text-nowrap">'headerclose'</code>事件。
  传递给<code translate="no" class="notranslate text-nowrap">hide()</code>的参数将放入事件对象的<code translate="no" class="notranslate text-nowrap">trigger</code>属性中。
</p>
<h2 id="modal-content" class="bv-no-focus-ring"><span class="bd-content-title">模式内容<a class="anchorjs-link" href="#modal-content" aria-labelledby="modal-content"></a></span></h2>
<h3 id="using-the-grid" class="bv-no-focus-ring"><span class="bd-content-title">使用网格<a class="anchorjs-link" href="#using-the-grid" aria-labelledby="using-the-grid"></a></span></h3>
<p>
  通过在模式体中嵌套<code translate="no" class="notranslate text-nowrap">&lt;b-container fluid&gt;</code>来利用模式中的引导网格系统。然后，
  像在其他地方一样，使用普通的网格系统<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code> (或 
  <code translate="no" class="notranslate text-nowrap">&lt;b-form-row&gt;</code>)和
  <code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>。
</p>
<h3 id="tooltips-and-popovers" class="bv-no-focus-ring"><span class="bd-content-title">工具提示和弹出窗口<a class="anchorjs-link" href="#tooltips-and-popovers" aria-labelledby="tooltips-and-popovers"></a></span></h3>
<p>工具提示和弹出窗口可以根据需要放置在modals中。关闭模式时，其中的任何工具提示和弹出窗口也会自动关闭。工具提示和弹出窗口将自动附加到模式元素（以确保正确的z索引），但您可以通过指定容器ID来覆盖它们的附加位置（有关详细信息，请参阅工具提示和弹出窗口文档）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-popover notranslate">
<div>
<button type="button" class="btn btn-secondary">Show Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modalPopover</span>&gt;</span>Show Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modalPopover"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Modal with Popover"</span> <span class="hljs-attr">ok-only</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
      This
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-popover</span>=<span class="hljs-string">"'Popover inside a modal!'"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Popover"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      triggers a popover on click.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
      This <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">v-b-tooltip</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tooltip in a modal!"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> will show a tooltip on
      hover.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="lazy-loading-and-static-modals" class="bv-no-focus-ring"><span class="bd-content-title">延迟加载和静态模式<a class="anchorjs-link" href="#lazy-loading-and-static-modals" aria-labelledby="lazy-loading-and-static-modals"></a></span></h2>
<p>
  默认情况下，modals在显示（延迟呈现）内容之前不会在文档中呈现内容。在可见时附加到<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>元素的模式。
  <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件不会影响布局，因为它们呈现为占位符注释节点（<code translate="no" class="notranslate text-nowrap">&lt;!----&gt;</code>)
  它们被放置在DOM位置。由于移植过程，可能需要两个或更多的<code translate="no" class="notranslate text-nowrap">$nextTick</code>才能将内容的更改呈现到目标中。
</p>
<p>
  通过将static prop设置为true，可以在文档中的适当位置呈现Modals（即<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件位于文档中的位置）。
  注意，即使<code translate="no" class="notranslate text-nowrap">static</code> 为<code translate="no" class="notranslate text-nowrap">true</code>时模态不可见/显示，
  模态的内容也将在DOM中呈现。要使静态模式延迟呈现，还需要将<code translate="no" class="notranslate text-nowrap">lazy</code> 属性设置
  为<code translate="no" class="notranslate text-nowrap">true</code> 。只有当模态可见时，它才会出现在文档中。注意，在静态模式下，<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件的位置可能会影响文档和模式的布局。
</p>
<p>
  如果属性<code translate="no" class="notranslate text-nowrap">static</code>不为<code translate="no" class="notranslate text-nowrap">true</code>，
  则<code translate="no" class="notranslate text-nowrap">lazy</code>属性将不起作用（非静态模式将始终延迟呈现）。
</p>
<h2 id="styling-options-and-customization" class="bv-no-focus-ring"><span class="bd-content-title">样式、选项和自定义<a class="anchorjs-link" href="#styling-options-and-customization" aria-labelledby="styling-options-and-customization"></a></span></h2>
<h3 id="modal-sizing" class="bv-no-focus-ring"><span class="bd-content-title">模式尺寸<a class="anchorjs-link" href="#modal-sizing" aria-labelledby="modal-sizing"></a></span></h3>
<p>
  模态有三种可选sizes，可通过属性<code translate="no" class="notranslate text-nowrap">size</code>。
  这些大小在某些断点处启动，以避免在较窄的视口上出现水平滚动条。有效的可选尺寸为<code translate="no" class="notranslate text-nowrap">sm</code>, 
  <code translate="no" class="notranslate text-nowrap">lg</code>,和
  <code translate="no" class="notranslate text-nowrap">xl</code>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-sizes notranslate">
<div>
<button type="button" class="btn btn-primary">xl modal</button>
<button type="button" class="btn btn-primary">lg modal</button>
<button type="button" class="btn btn-primary">sm modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-xl</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>xl modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-lg</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>lg modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-sm</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>sm modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-xl"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xl"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Extra Large Modal"</span>&gt;</span>Hello Extra Large Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-lg"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Large Modal"</span>&gt;</span>Hello Large Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-sm"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Small Modal"</span>&gt;</span>Hello Small Modal!<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">size</code>属性将大小映射到<code translate="no" class="notranslate text-nowrap">.modal-&lt;size&gt;</code>类。
</p>
<h3 id="scrolling-long-content" class="bv-no-focus-ring"><span class="bd-content-title">滚动长内容<a class="anchorjs-link" href="#scrolling-long-content" aria-labelledby="scrolling-long-content"></a></span></h3>
<p>当modals对于用户的视窗或设备太长时，它们会独立于页面本身滚动。试试下面的演示看看我们的意思。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-scroll-overflow notranslate">
<div>
<button type="button" class="btn btn-secondary">Launch overflowing modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-tall</span>&gt;</span>Launch overflowing modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-tall"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Overflowing Content"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-4"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 20"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"i"</span>&gt;</span>
      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
      in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  您还可以通过将属性<code translate="no" class="notranslate text-nowrap">scrollable</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>来创建一个可滚动的模式，该模式允许模式体滚动。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-scrollable-content notranslate">
<div>
<button type="button" class="btn btn-secondary">Launch scrolling modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-scrollable</span>&gt;</span>Launch scrolling modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-scrollable"</span> <span class="hljs-attr">scrollable</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Scrollable Content"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-4"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in 20"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"i"</span>&gt;</span>
      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
      in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="vertically-centered-modal" class="bv-no-focus-ring"><span class="bd-content-title">垂直居中模式<a class="anchorjs-link" href="#vertically-centered-modal" aria-labelledby="vertically-centered-modal"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">centered</code>属性，在视口中垂直居中模式。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-center-vertically notranslate">
<div>
<button type="button" class="btn btn-secondary">Launch centered modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-center</span>&gt;</span>Launch centered modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-center"</span> <span class="hljs-attr">centered</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"BootstrapVue"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-4"</span>&gt;</span>Vertically centered modal!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  您可以随意将<code translate="no" class="notranslate text-nowrap">centered</code>与<code translate="no" class="notranslate text-nowrap">scrollable</code>的混合。
</p>
<h3 id="variants" class="bv-no-focus-ring"><span class="bd-content-title">变量<a class="anchorjs-link" href="#variants" aria-labelledby="variants"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">header-bg-variant</code>, 
  <code translate="no" class="notranslate text-nowrap">header-text-variant</code>, 
  <code translate="no" class="notranslate text-nowrap">body-bg-variant</code>,
   <code translate="no" class="notranslate text-nowrap">body-text-variant</code>, 
   <code translate="no" class="notranslate text-nowrap">footer-bg-variant</code>,和
   <code translate="no" class="notranslate text-nowrap">footer-text-variant</code>属性来控制页眉、页脚和正文背景以及文本变量。
   使用任何标准的引导变量，如<code translate="no" class="notranslate text-nowrap">danger</code>, 
   <code translate="no" class="notranslate text-nowrap">warning</code>, 
   <code translate="no" class="notranslate text-nowrap">info</code>, 
   <code translate="no" class="notranslate text-nowrap">success</code>, 
   <code translate="no" class="notranslate text-nowrap">dark</code>, 
   <code translate="no" class="notranslate text-nowrap">light</code>等。
</p>
<p>
  页眉下边框和页脚上边框的变体可以分别由<code translate="no" class="notranslate text-nowrap">header-border-variant</code>和
  <code translate="no" class="notranslate text-nowrap">footer-border-variant</code>属性控制。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-variants notranslate">
<div>
<button type="button" class="btn btn-primary">Show Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"show=true"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Show Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"show"</span>
      <span class="hljs-attr">title</span>=<span class="hljs-string">"Modal Variants"</span>
      <span class="hljs-attr">:header-bg-variant</span>=<span class="hljs-string">"headerBgVariant"</span>
      <span class="hljs-attr">:header-text-variant</span>=<span class="hljs-string">"headerTextVariant"</span>
      <span class="hljs-attr">:body-bg-variant</span>=<span class="hljs-string">"bodyBgVariant"</span>
      <span class="hljs-attr">:body-text-variant</span>=<span class="hljs-string">"bodyTextVariant"</span>
      <span class="hljs-attr">:footer-bg-variant</span>=<span class="hljs-string">"footerBgVariant"</span>
      <span class="hljs-attr">:footer-text-variant</span>=<span class="hljs-string">"footerTextVariant"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1 text-center"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Background<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Text<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"3"</span>&gt;</span>Header<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"headerBgVariant"</span>
              <span class="hljs-attr">:options</span>=<span class="hljs-string">"variants"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"headerTextVariant"</span>
              <span class="hljs-attr">:options</span>=<span class="hljs-string">"variants"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"3"</span>&gt;</span>Body<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"bodyBgVariant"</span>
              <span class="hljs-attr">:options</span>=<span class="hljs-string">"variants"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"bodyTextVariant"</span>
              <span class="hljs-attr">:options</span>=<span class="hljs-string">"variants"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"3"</span>&gt;</span>Footer<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"footerBgVariant"</span>
              <span class="hljs-attr">:options</span>=<span class="hljs-string">"variants"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"footerTextVariant"</span>
              <span class="hljs-attr">:options</span>=<span class="hljs-string">"variants"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:modal-footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-100"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left"</span>&gt;</span>Modal Footer Content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
            <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right"</span>
            @<span class="hljs-attr">click</span>=<span class="hljs-string">"show=false"</span>
          &gt;</span>
            Close
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">variants</span>: [<span class="hljs-string">'primary'</span>, <span class="hljs-string">'secondary'</span>, <span class="hljs-string">'success'</span>, <span class="hljs-string">'warning'</span>, <span class="hljs-string">'danger'</span>, <span class="hljs-string">'info'</span>, <span class="hljs-string">'light'</span>, <span class="hljs-string">'dark'</span>],
        <span class="hljs-attr">headerBgVariant</span>: <span class="hljs-string">'dark'</span>,
        <span class="hljs-attr">headerTextVariant</span>: <span class="hljs-string">'light'</span>,
        <span class="hljs-attr">bodyBgVariant</span>: <span class="hljs-string">'light'</span>,
        <span class="hljs-attr">bodyTextVariant</span>: <span class="hljs-string">'dark'</span>,
        <span class="hljs-attr">footerBgVariant</span>: <span class="hljs-string">'warning'</span>,
        <span class="hljs-attr">footerTextVariant</span>: <span class="hljs-string">'dark'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  您还可以分别通过code translate="no" class="notranslate text-nowrap">modal-class</code>,
  <code translate="no" class="notranslate text-nowrap">content-class</code>, 
  <code translate="no" class="notranslate text-nowrap">header-class</code>, 
  <code translate="no" class="notranslate text-nowrap">body-class</code>和
  <code translate="no" class="notranslate text-nowrap">footer-class</code>属性将任意类应用于modal对话框容器、content（modal窗口本身）、header、body和footer。道具接受字符串或字符串数组。
</p>
<h3 id="hiding-the-backdrop" class="bv-no-focus-ring"><span class="bd-content-title">隐藏背景<a class="anchorjs-link" href="#hiding-the-backdrop" aria-labelledby="hiding-the-backdrop"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">hide-backdrop</code>属性隐藏模式的背景。
</p>
<div translate="translate" class="bd-example vue-example vue-example-modal-no-backdrop notranslate">
<div>
<button type="button" class="btn btn-secondary">Open modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-no-backdrop</span>&gt;</span>Open modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-no-backdrop"</span> <span class="hljs-attr">hide-backdrop</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"shadow"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"BootstrapVue"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span>
      We've added the utility class <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>'shadow'<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
      to the modal content for added effect.
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  请注意，即使背景被隐藏，单击模式外部仍将关闭模式。您可以通过将<code translate="no" class="notranslate text-nowrap">no-close-on-backdrop</code>属性设置为<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>来禁用此行为。
</p>
<h3 id="disable-open-and-close-animation" class="bv-no-focus-ring"><span class="bd-content-title">禁用打开和关闭动画<a class="anchorjs-link" href="#disable-open-and-close-animation" aria-labelledby="disable-open-and-close-animation"></a></span></h3>
<p>
  要在模式打开和关闭时禁用淡入淡出过渡/动画，只需在<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件上设置属性<code translate="no" class="notranslate text-nowrap">no-fade</code>。
</p>
<h3 id="footer-button-sizing" class="bv-no-focus-ring"><span class="bd-content-title">页脚按钮大小<a class="anchorjs-link" href="#footer-button-sizing" aria-labelledby="footer-button-sizing"></a></span></h3>
<p>
  喜欢默认页脚中的较小或较大按钮吗？ 只需将<code translate="no" class="notranslate text-nowrap">button-size</code>属性的小按钮
  设置为<code translate="no" class="notranslate text-nowrap">'sm'</code>，或将大按钮设置为<code translate="no" class="notranslate text-nowrap">'lg'</code>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-modal-footer-btn-sizes notranslate">
<div>
<button type="button" class="btn btn-secondary">Small Footer Buttons</button>
<button type="button" class="btn btn-secondary">Large Footer Buttons</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-footer-sm</span>&gt;</span>Small Footer Buttons<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-footer-lg</span>&gt;</span>Large Footer Buttons<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-footer-sm"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"BootstrapVue"</span> <span class="hljs-attr">button-size</span>=<span class="hljs-string">"sm"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span>This modal has small footer buttons<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-footer-lg"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"BootstrapVue"</span> <span class="hljs-attr">button-size</span>=<span class="hljs-string">"lg"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span>This modal has large footer buttons<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  如果您已经通过<a href="#custom-rendering-with-slots" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">modal-footer</code></a>槽提供了自己的页脚，那么属性<code translate="no" class="notranslate text-nowrap">button-size</code>将不起作用。
</p>
<h3 id="disabling-built-in-footer-buttons" class="bv-no-focus-ring"><span class="bd-content-title">禁用内置页脚按钮<a class="anchorjs-link" href="#disabling-built-in-footer-buttons" aria-labelledby="disabling-built-in-footer-buttons"></a></span></h3>
<p>您可以通过编程方式禁用内置页脚按钮。</p>
<p>
  通过将<code translate="no" class="notranslate text-nowrap">cancel-disabled</code>和 
  <code translate="no" class="notranslate text-nowrap">ok-disabled</code>属性分别设置为<code translate="no" class="notranslate text-nowrap">true</code>，
  可以分别禁用<strong>Cancel</strong> 和 <strong>OK</strong>按钮。将属性设置为<code translate="no" class="notranslate text-nowrap">false</code>以重新启用按钮。
</p>
<p>
  要同时禁用<strong>Cancel</strong>和<strong>OK</strong>按钮，只需将<code translate="no" class="notranslate text-nowrap">busy</code>属性设置为
  <code translate="no" class="notranslate text-nowrap">true</code>。将其设置为<code translate="no" class="notranslate text-nowrap">false</code>可重新启用两个按钮。
</p>
<h3 id="custom-rendering-with-slots" class="bv-no-focus-ring"><span class="bd-content-title">带插槽的自定义渲染<a class="anchorjs-link" href="#custom-rendering-with-slots" aria-labelledby="custom-rendering-with-slots"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>提供多个命名槽（其中一些槽的作用域是可选的），您可以使用这些槽自定义模式的各个部分的内容。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>Slot</th>
<th>可选范围</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">default</code></td>
<td>Yes</td>
<td>模式的主要内容</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">modal-title</code></td>
<td>Yes</td>
<td>放在情态词标题中的内容</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">modal-header</code></td>
<td>Yes</td>
<td>要放在标题中的内容。替换整个标题，包括“关闭”按钮</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">modal-footer</code></td>
<td>Yes</td>
<td>要放在页脚中的内容。替换包括按钮在内的整个页脚</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">modal-ok</code></td>
<td>No</td>
<td>要放在页脚内的内容“确定”按钮</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">modal-cancel</code></td>
<td>No</td>
<td>要放置在页脚中的内容“取消”按钮</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">modal-header-close</code></td>
<td>No</td>
<td>
  放置在页眉关闭（<code translate="no" class="notranslate text-nowrap">x</code>）按钮内的内容
</td>
</tr>
</tbody>
</table>
</div>
<p>支持可选作用域的插槽可用的作用域为：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>方法或属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">ok()</code></td>
<td>
  关闭模式并触发<code translate="no" class="notranslate text-nowrap">ok</code>和
  <code translate="no" class="notranslate text-nowrap">hide</code>事件，<code translate="no" class="notranslate text-nowrap">bvModalEvent.trigger = 'ok'</code>
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">cancel()</code></td>
<td>
  关闭模式并启动<code translate="no" class="notranslate text-nowrap">cancel</code>和
  <code translate="no" class="notranslate text-nowrap">hide</code> 事件，<code translate="no" class="notranslate text-nowrap">bvModalEvent.trigger = 'cancel'</code>
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">close()</code></td>
<td>
  关闭模式并触发<code translate="no" class="notranslate text-nowrap">close</code>和
  <code translate="no" class="notranslate text-nowrap">hide</code>事件，<code translate="no" class="notranslate text-nowrap">bvModalEvent.trigger = 'headerclose'</code>
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">hide(trigger)</code></td>
<td>
  关闭模式并触发<code translate="no" class="notranslate text-nowrap">hide</code>事件，<code translate="no" class="notranslate text-nowrap">bvModalEvent.trigger = trigger</code>（trigger是可选的）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">visible</code></td>
<td>
  模态的可见性状态。如果模态可见，则为<code translate="no" class="notranslate text-nowrap">true</code>；如果不可见，则为<code translate="no" class="notranslate text-nowrap">false</code>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="example-modal-using-custom-scoped-slots" class="bv-no-focus-ring"><span class="bd-content-title">使用自定义范围插槽的示例模式<a class="anchorjs-link" href="#example-modal-using-custom-scoped-slots" aria-labelledby="example-modal-using-custom-scoped-slots"></a></span></h4>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-scoped-slots notranslate">
<button type="button" class="btn btn-secondary">Open Modal</button>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"$bvModal.show('modal-scoped')"</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-scoped"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:modal-header</span>=<span class="hljs-string">"{ close }"</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- Emulate built in modal header close button action --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"close()"</span>&gt;</span>
        Close Modal
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>Modal Header<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:default</span>=<span class="hljs-string">"{ hide }"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Modal Body with button<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"hide()"</span>&gt;</span>Hide Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:modal-footer</span>=<span class="hljs-string">"{ ok, cancel, hide }"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Custom Footer<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- Emulate built in modal footer ok and cancel button actions --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"ok()"</span>&gt;</span>
        OK
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"cancel()"</span>&gt;</span>
        Cancel
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- Button with custom close trigger value --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-secondary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"hide('forget')"</span>&gt;</span>
        Forget it
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h2 id="multiple-modal-support" class="bv-no-focus-ring"><span class="bd-content-title">多模式支持<a class="anchorjs-link" href="#multiple-modal-support" aria-labelledby="multiple-modal-support"></a></span></h2>
<p>与本机引导v4不同，BootstrapVue支持同时打开多个modal。</p>
<p>
  要禁用特定模式的堆叠，只需在<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件上设置
  属性 <code translate="no" class="notranslate text-nowrap">no-stacking</code>。这将在显示另一个模态之前隐藏该模态。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-multiple notranslate">
<div>
<button type="button" class="btn btn-secondary">Open First Modal</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-multi-1</span>&gt;</span>Open First Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-multi-1"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"First Modal"</span> <span class="hljs-attr">ok-only</span> <span class="hljs-attr">no-stacking</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span>First Modal<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-multi-2</span>&gt;</span>Open Second Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-multi-2"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Second Modal"</span> <span class="hljs-attr">ok-only</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span>Second Modal<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">v-b-modal.modal-multi-3</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>Open Third Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-multi-3"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Third Modal"</span> <span class="hljs-attr">ok-only</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>Third Modal<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  避免将<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code> 嵌套在另一个<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code> 中，
  因为它可能会被“约束”到父模式对话框的边界（特别是在使用静态模式时）。
</li>
<li>对于打开的每个模式，不透明背景将逐渐变暗。这是预期的行为，因为每个背景是打开超过其他模式和背景。</li>
</ul>
<h2 id="modal-message-boxes" class="bv-no-focus-ring"><span class="bd-content-title">模式消息框<a class="anchorjs-link" href="#modal-message-boxes" aria-labelledby="modal-message-boxes"></a></span></h2>
<p>
  BootstrapVue在公开的<code translate="no" class="notranslate text-nowrap">this.$bvModal</code>对象上提供了一些内置的消息框方法。
  这些方法提供了一种从应用程序中的任何位置生成简单的“确定”和“确认”样式模式消息的方法，而无需在页面中显式放置<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件。
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">this.$bvModal.msgBoxOk(message, options)</code></td>
<td>
  打开一个包含<code translate="no" class="notranslate text-nowrap">message</code>和一个OK按钮的模式
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">this.$bvModal.msgBoxConfirm(message, options)</code></td>
<td>
  打开一个以<code translate="no" class="notranslate text-nowrap">message</code>为内容的模式，然后单击“取消”和“确定”按钮
</td>
</tr>
</tbody>
</table>
</div>
<p>
  <code translate="no" class="notranslate text-nowrap">options</code> 参数是用于添加标题和设置消息框模式样式的可选配置对象。
  对象属性对应于<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>属性，但以camelCase格式而不是kebab格式除外。
</p>
<p>
  这两个方法都返回一个 <code translate="no" class="notranslate text-nowrap">Promise</code>（需要IE 11的polyfill和更旧的浏览器支持），
  当模式隐藏时，该Promise将解析为一个值。<code translate="no" class="notranslate text-nowrap">.msgBoxOk()</code>始终解析为值<code translate="no" class="notranslate text-nowrap">true</code>，
  而<code translate="no" class="notranslate text-nowrap">.msgBoxConfirm()</code>解析为
  <code translate="no" class="notranslate text-nowrap">true</code> (单击“确定”按钮), 
<code translate="no" class="notranslate text-nowrap">false</code> (单击“取消”按钮),或
 <code translate="no" class="notranslate text-nowrap">null</code> (如果通过背景单击、按<kbd class="notranslate" translate="no">ESC</kbd> C键或其他方式关闭了模式)。
</p>
<p>
  如果未提供<code translate="no" class="notranslate text-nowrap">message</code>，两个方法将立即返回<code translate="no" class="notranslate text-nowrap">undefined</code>的值。
</p>
<p>
  您可以使用<code translate="no" class="notranslate text-nowrap">.then(..).catch(...)</code>或async<code translate="no" class="notranslate text-nowrap">await</code>代码样式
  （async <code translate="no" class="notranslate text-nowrap">await</code>需要现代浏览器或transpiler）。
</p>
<h3 id="ok-message-box" class="bv-no-focus-ring"><span class="bd-content-title">确定消息框<a class="anchorjs-link" href="#ok-message-box" aria-labelledby="ok-message-box"></a></span></h3>
<p>示例OK消息框</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-msg-box-ok notranslate">
<div>
<div class="mb-2">
<button type="button" class="btn btn-secondary">Simple msgBoxOk</button>
Return value: </div>
<div class="mb-1">
<button type="button" class="btn btn-secondary">msgBoxOk with options</button>
Return value: </div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showMsgBoxOne"</span>&gt;</span>Simple msgBoxOk<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
     Return value: {{ String(boxOne) }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showMsgBoxTwo"</span>&gt;</span>msgBoxOk with options<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
     Return value: {{ String(boxTwo) }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">boxOne</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">boxTwo</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      showMsgBoxOne() {
        <span class="hljs-keyword">this</span>.boxOne = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.$bvModal.msgBoxOk(<span class="hljs-string">'Action completed'</span>)
          .then(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {
            <span class="hljs-keyword">this</span>.boxOne = value
          })
          .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
            <span class="hljs-comment">// An error occurred</span>
          })
      },
      showMsgBoxTwo() {
        <span class="hljs-keyword">this</span>.boxTwo = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.$bvModal.msgBoxOk(<span class="hljs-string">'Data was submitted successfully'</span>, {
          <span class="hljs-attr">title</span>: <span class="hljs-string">'Confirmation'</span>,
          <span class="hljs-attr">size</span>: <span class="hljs-string">'sm'</span>,
          <span class="hljs-attr">buttonSize</span>: <span class="hljs-string">'sm'</span>,
          <span class="hljs-attr">okVariant</span>: <span class="hljs-string">'success'</span>,
          <span class="hljs-attr">headerClass</span>: <span class="hljs-string">'p-2 border-bottom-0'</span>,
          <span class="hljs-attr">footerClass</span>: <span class="hljs-string">'p-2 border-top-0'</span>,
          <span class="hljs-attr">centered</span>: <span class="hljs-literal">true</span>
        })
          .then(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {
            <span class="hljs-keyword">this</span>.boxTwo = value
          })
          .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
            <span class="hljs-comment">// An error occurred</span>
          })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="confirm-message-box" class="bv-no-focus-ring"><span class="bd-content-title">确认消息框<a class="anchorjs-link" href="#confirm-message-box" aria-labelledby="confirm-message-box"></a></span></h3>
<p>确认消息框示例</p>
<div translate="translate" class="bd-example vue-example vue-example-b-modal-msg-box-confirm notranslate">
<div>
<div class="mb-2">
<button type="button" class="btn btn-secondary">Simple msgBoxConfirm</button>
Return value: </div>
<div class="mb-1">
<button type="button" class="btn btn-secondary">msgBoxConfirm with options</button>
Return value: </div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showMsgBoxOne"</span>&gt;</span>Simple msgBoxConfirm<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
     Return value: {{ String(boxOne) }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-1"</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showMsgBoxTwo"</span>&gt;</span>msgBoxConfirm with options<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
     Return value: {{ String(boxTwo) }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">boxOne</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">boxTwo</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      showMsgBoxOne() {
        <span class="hljs-keyword">this</span>.boxOne = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.$bvModal.msgBoxConfirm(<span class="hljs-string">'Are you sure?'</span>)
          .then(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {
            <span class="hljs-keyword">this</span>.boxOne = value
          })
          .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
            <span class="hljs-comment">// An error occurred</span>
          })
      },
      showMsgBoxTwo() {
        <span class="hljs-keyword">this</span>.boxTwo = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.$bvModal.msgBoxConfirm(<span class="hljs-string">'Please confirm that you want to delete everything.'</span>, {
          <span class="hljs-attr">title</span>: <span class="hljs-string">'Please Confirm'</span>,
          <span class="hljs-attr">size</span>: <span class="hljs-string">'sm'</span>,
          <span class="hljs-attr">buttonSize</span>: <span class="hljs-string">'sm'</span>,
          <span class="hljs-attr">okVariant</span>: <span class="hljs-string">'danger'</span>,
          <span class="hljs-attr">okTitle</span>: <span class="hljs-string">'YES'</span>,
          <span class="hljs-attr">cancelTitle</span>: <span class="hljs-string">'NO'</span>,
          <span class="hljs-attr">footerClass</span>: <span class="hljs-string">'p-2'</span>,
          <span class="hljs-attr">hideHeaderClose</span>: <span class="hljs-literal">false</span>,
          <span class="hljs-attr">centered</span>: <span class="hljs-literal">true</span>
        })
          .then(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {
            <span class="hljs-keyword">this</span>.boxTwo = value
          })
          .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> {
            <span class="hljs-comment">// An error occurred</span>
          })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="message-box-notes" class="bv-no-focus-ring"><span class="bd-content-title">消息框注释<a class="anchorjs-link" href="#message-box-notes" aria-labelledby="message-box-notes"></a></span></h3>
<ul>
<li>
  <code translate="no" class="notranslate text-nowrap">this.$bvModal</code>注入仅在使用完整的<code translate="no" class="notranslate text-nowrap">BootstrapVue</code>插件或
  <code translate="no" class="notranslate text-nowrap">ModalPlugin</code>插件时可用。如果仅导入<code translate="no" class="notranslate text-nowrap">b-modal</code>组件，
  则此选项不可用。要导入注入，请使用<code translate="no" class="notranslate text-nowrap">BVModalPlugin</code>插件。
</li>
<li>
  为每个Vue虚拟机（即每个实例化组件）创建一个新的<code translate="no" class="notranslate text-nowrap">$bvModal</code>注入（mixin），
  并且不能通过直接访问<code translate="no" class="notranslate text-nowrap">Vue.prototype</code>来使用，因为它需要访问实例的<code translate="no" class="notranslate text-nowrap">this</code>和
  <code translate="no" class="notranslate text-nowrap">$root</code>上下文。
</li>
<li>
  消息框需要浏览器中的<code translate="no" class="notranslate text-nowrap">Promise</code>支持。如果你的应用是针对较老的浏览器，如IE 11，
  请包括一个提供<code translate="no" class="notranslate text-nowrap">Promise</code>支持的polyfill。
  如果未检测到<code translate="no" class="notranslate text-nowrap">Promise</code>支持，则消息框方法将立即返回<code translate="no" class="notranslate text-nowrap">undefined</code>。
</li>
<li>
  消息框是<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>组件的扩展，因此支持大多数<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>属性
  （使用camelCase格式），但以下属性除外：<code translate="no" class="notranslate text-nowrap">lazy</code>,
  <code translate="no" class="notranslate text-nowrap">static</code>, 
  <code translate="no" class="notranslate text-nowrap">busy</code>,
   <code translate="no" class="notranslate text-nowrap">visible</code>, 
   <code translate="no" class="notranslate text-nowrap">noStacking</code>, 
   <code translate="no" class="notranslate text-nowrap">okOnly</code>, 
   <code translate="no" class="notranslate text-nowrap">okDisabled</code>,和 
   <code translate="no" class="notranslate text-nowrap">cancelDisabled</code>。
</li>
<li>
  如果选项中没有提供<code translate="no" class="notranslate text-nowrap">title</code> （或<code translate="no" class="notranslate text-nowrap">titleHtml</code>），则不会显示标题。
</li>
<li>
  当选项中提供<code translate="no" class="notranslate text-nowrap">title</code>（或<code translate="no" class="notranslate text-nowrap">titleHtml</code>）时，
  默认情况下不显示标题关闭按钮。通过在选项中设置<code translate="no" class="notranslate text-nowrap">hideHeaderClose: false</code>，可以启用标题关闭按钮。
</li>
<li>
  如果消息框在隐藏之前被关闭/销毁，则会抛出错误（拒绝承诺）。如果使用异步<code translate="no" class="notranslate text-nowrap">await</code>样式的代码，则始终包含<code translate="no" class="notranslate text-nowrap">.catch(errHandler)</code>拒绝处理程序、事件。
</li>
<li>
  使用Vue路由器（或类似路由器）时，如果在隐藏模式之前更改了路由，则消息框将关闭并拒绝。如果希望在路由更改时消息框保持打开状态，
  请使用<code translate="no" class="notranslate text-nowrap">this.$root.$bvModal</code>而不是<code translate="no" class="notranslate text-nowrap">this.$bvModal</code>。
</li>
<li>在服务器端呈现（SSR）期间无法生成消息框。</li>
<li>
  消息框<code translate="no" class="notranslate text-nowrap">message</code>当前不支持HTML字符串，但是，可以将<code translate="no" class="notranslate text-nowrap">VNodes</code>数组
  作为<code translate="no" class="notranslate text-nowrap">message</code>传递，以便对标记进行细粒度控制。
  您可以使用Vue的<a href="https://vuejs.org/v2/guide/render-function.html#createElement-Arguments" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">this.$createElement</code></a>
  方法生成Vnode。也可以对模式标题（通过将VNodes传递给<code translate="no" class="notranslate text-nowrap">title</code>选项）、OK按钮文本
  （通过<code translate="no" class="notranslate text-nowrap">okTitle</code>选项）和CANCEL按钮文本（通过<code translate="no" class="notranslate text-nowrap">cancelTitle</code>选项）执行此操作。
</li>
</ul>
<h3 id="message-box-advanced-usage" class="bv-no-focus-ring"><span class="bd-content-title">消息框高级用法<a class="anchorjs-link" href="#message-box-advanced-usage" aria-labelledby="message-box-advanced-usage"></a></span></h3>
<p>
  使用<code translate="no" class="notranslate text-nowrap">this.$bvModal.msgBoxOk(...)</code>或
  <code translate="no" class="notranslate text-nowrap">this.$bvModal.msgBoxConfirm(...)</code>方法生成模式时，
  您可能希望模式内容不仅仅是字符串消息。如上面的<a href="#message-box-notes" class="font-weight-bold">消息框注释</a> 部分所述，可以将vnode数组作为更复杂内容的消息和标题传递。
</p>
<p>
  使用Vue的<a href="https://vuejs.org/v2/guide/render-function.html#createElement-Arguments" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">this.$createElement</code></a>方法生成vnode。
 </p>
<div translate="translate" class="bd-example vue-example vue-example-modal-msg-box-advanced notranslate">
<div>
<button type="button" class="btn btn-secondary">Show OK message box with custom content</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showMsgOk"</span>&gt;</span>Show OK message box with custom content<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      showMsgOk() {
        <span class="hljs-keyword">const</span> h = <span class="hljs-keyword">this</span>.$createElement
        <span class="hljs-comment">// Using HTML string</span>
        <span class="hljs-keyword">const</span> titleVNode = h(<span class="hljs-string">'div'</span>, { <span class="hljs-attr">domProps</span>: { <span class="hljs-attr">innerHTML</span>: <span class="hljs-string">'Title from &lt;i&gt;HTML&lt;i&gt; string'</span> } })
        <span class="hljs-comment">// More complex structure</span>
        <span class="hljs-keyword">const</span> messageVNode = h(<span class="hljs-string">'div'</span>, { <span class="hljs-attr">class</span>: [<span class="hljs-string">'foobar'</span>] }, [
          h(<span class="hljs-string">'p'</span>, { <span class="hljs-attr">class</span>: [<span class="hljs-string">'text-center'</span>] }, [
            <span class="hljs-string">' Flashy '</span>,
            h(<span class="hljs-string">'strong'</span>, <span class="hljs-string">'msgBoxOk'</span>),
            <span class="hljs-string">' message '</span>,
          ]),
          h(<span class="hljs-string">'p'</span>, { <span class="hljs-attr">class</span>: [<span class="hljs-string">'text-center'</span>] }, [h(<span class="hljs-string">'b-spinner'</span>)]),
          h(<span class="hljs-string">'b-img'</span>, {
            <span class="hljs-attr">props</span>: {
              <span class="hljs-attr">src</span>: <span class="hljs-string">'https://picsum.photos/id/20/250/250'</span>,
              <span class="hljs-attr">thumbnail</span>: <span class="hljs-literal">true</span>,
              <span class="hljs-attr">center</span>: <span class="hljs-literal">true</span>,
              <span class="hljs-attr">fluid</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">rounded</span>: <span class="hljs-string">'circle'</span>
            }
          })
        ])
        <span class="hljs-comment">// We must pass the generated VNodes as arrays</span>
        <span class="hljs-keyword">this</span>.$bvModal.msgBoxOk([messageVNode], {
          <span class="hljs-attr">title</span>: [titleVNode],
          <span class="hljs-attr">buttonSize</span>: <span class="hljs-string">'sm'</span>,
          <span class="hljs-attr">centered</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">size</span>: <span class="hljs-string">'sm'</span>
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="listening-to-modal-changes-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过$root事件监听模式更改<a class="anchorjs-link" href="#listening-to-modal-changes-via-root-events" aria-labelledby="listening-to-modal-changes-via-root-events"></a></span></h2>
<p>要监听任何模式打开，请使用：</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  mounted() {
    <span class="hljs-keyword">this</span>.$root.$on(<span class="hljs-string">'bv::modal::show'</span>, (bvEvent, modalId) =&gt; {
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Modal is about to be shown'</span>, bvEvent, modalId)
    })
  }
}</pre></figure>
<p>
  有关发出的事件的完整列表，请参阅本文档的<a href="#comp-ref-b-modal" class="font-weight-bold">事件</a>部分。
</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">可访问性<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>提供了一些辅助功能，
  包括自动对焦、返回对焦、键盘（选项卡）对焦控制和自动<code translate="no" class="notranslate text-nowrap">aria-*</code>属性。
</p>
<h3 id="modal-aria-attributes" class="bv-no-focus-ring"><span class="bd-content-title">模式 ARIA 属性<a class="anchorjs-link" href="#modal-aria-attributes" aria-labelledby="modal-aria-attributes"></a></span></h3>
<p>
  在大多数情况下，<code translate="no" class="notranslate text-nowrap">aria-labelledby</code>和
  <code translate="no" class="notranslate text-nowrap">aria-describedby</code>属性将自动出现在模式上。
</p>
<ul>
<li>
  如果隐藏了头，或者提供了自己的头，或者没有提供模式标题，<code translate="no" class="notranslate text-nowrap">aria-labelledby</code>属性将<strong>不</strong>存在。
  建议为您的modals提供一个标题（当使用内置头文件时）。您可以直观地隐藏标题标题，
  但仍然可以通过设置<code translate="no" class="notranslate text-nowrap">title-sr-only</code>属性使其对屏幕阅读器可用。
  如果没有头，则可以通过向<code translate="no" class="notranslate text-nowrap">aria-label</code>属性传递字符串来为模态提供标签。
</li>
<li>
  <code translate="no" class="notranslate text-nowrap">aria-describedby</code>属性将始终指向模态的正文内容。
</li>
<li>
  如果使用字符串值指定<code translate="no" class="notranslate text-nowrap">aria-label</code>属性，则将不会呈现<code translate="no" class="notranslate text-nowrap">aria-labelledby</code>属性，即使您有模式的标题/标题。
</li>
</ul>
<p>
  在2.0.0-rc.27版本中添加了<code translate="no" class="notranslate text-nowrap">aria-label</code>和
  <code translate="no" class="notranslate text-nowrap">title-sr-only</code>属性。
</p>
<h3 id="auto-focus-on-open" class="bv-no-focus-ring"><span class="bd-content-title">打开时自动聚焦<a class="anchorjs-link" href="#auto-focus-on-open" aria-labelledby="auto-focus-on-open"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>打开时将自动对焦模态容器。</p>
<p>
  您可以通过监听显示的<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>事件来预聚焦<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>
  中的元素，并调用该元素的<code translate="no" class="notranslate text-nowrap">focus()</code>方法。<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>
  不会尝试自动对焦，如果元素已在<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>中具有焦点。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> @<span class="hljs-attr">shown</span>=<span class="hljs-string">"focusMyElement"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>&gt;</span>I Don't Have Focus<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- Element to gain focus when modal is opened --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"focusThis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span></pre></figure>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">methods</span>: {
    focusMyElement() {
      <span class="hljs-keyword">this</span>.$refs.focusThis.focus()
    }
  }
}</pre></figure>
<p>
  或者，如果使用<code translate="no" class="notranslate text-nowrap">b-form-*</code>表单控件，
  则可以在模式打开时使用<code translate="no" class="notranslate text-nowrap">autofocus</code>属性<code translate="no" class="notranslate text-nowrap">autofocus</code>表单控件。
  注意，如果在<code translate="no" class="notranslate text-nowrap">lazy</code>属性集的情况下使用<code translate="no" class="notranslate text-nowrap">static</code>属性，
  则<code translate="no" class="notranslate text-nowrap">autofocus</code>属性将无法与b-model一起使用，因为在DOM中安装<code translate="no" class="notranslate text-nowrap">b-form-*</code>控件时会发生autofocus。
</p>
<p>
  如果要自动对焦其中一个内置模式按钮（<code translate="no" class="notranslate text-nowrap">ok</code>,
  <code translate="no" class="notranslate text-nowrap">cancel</code> 或 
  <code translate="no" class="notranslate text-nowrap">close</code>按钮），可以将属性<code translate="no" class="notranslate text-nowrap">auto-focus-button</code>设置为
  <code translate="no" class="notranslate text-nowrap">'ok'</code>, 
  <code translate="no" class="notranslate text-nowrap">'cancel'</code>或 
  <code translate="no" class="notranslate text-nowrap">'close'</code>并且
  <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>将对焦指定的按钮（如果存在）。此功能也可用于模式消息框。
</p>
<p class="alert alert-warning"> <strong>注意:</strong> 
  
  出于可访问性的原因，<strong>不建议</strong>将输入或控件自动对焦到模式内部，因为屏幕阅读器用户将不知道输入位置的上下文（可能不会声明该模式）。
  最好让 <code class="notranslate" translate="no">&lt;b-modal&gt;</code>聚焦模态的容器，允许模态信息与用户对话，然后允许用户在输入中使用tab键。
</p>
<h3 id="returning-focus-to-the-triggering-element" class="bv-no-focus-ring"><span class="bd-content-title">将焦点返回到触发元素<a class="anchorjs-link" href="#returning-focus-to-the-triggering-element" aria-labelledby="returning-focus-to-the-triggering-element"></a></span></h3>
<p>出于可访问性的原因，希望在模式关闭时将焦点返回到触发模式打开的元素。</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code> 将尝试并自动确定在打开模态之前哪个元素具有焦点，如果可能，将在模态已隐藏时将焦点返回给该元素。但是，提供了一些方法和选项，允许您指定在模态隐藏后要将焦点返回到的元素。</p>
<h4 id="specify-return-focus-element-via-the-return-focus-prop" class="bv-no-focus-ring">
  <span class="bd-content-title">
    通过返回焦点属性指定<code translate="no" class="notranslate text-nowrap">返回焦点</code>元素
  <a class="anchorjs-link" href="#specify-return-focus-element-via-the-return-focus-prop" aria-labelledby="specify-return-focus-element-via-the-return-focus-prop"></a></span></h4>
<p>
  当模式关闭时，还可以通过将 <code translate="no" class="notranslate text-nowrap">返回焦点</code>属性设置为以下之一来指定要返回焦点的元素：
</p>
<ul>
<li>
  CSS查询选择器字符串（或以<code translate="no" class="notranslate text-nowrap">#</code>开头的元素ID）
</li>
<li>
  组件引用（安装在可聚焦元素上，如<code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code>）
</li>
<li>对可聚焦的DOM元素的引用</li>
</ul>
<p>
  如果传入的元素不可聚焦，那么浏览器将确定哪些元素具有焦点（通常<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>，这是不可取的）
</p>
<p>
  当您使用 <code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>方法
  <code translate="no" class="notranslate text-nowrap">show()</code>和
  <code translate="no" class="notranslate text-nowrap">hide()</code>或<code translate="no" class="notranslate text-nowrap">v-model</code>属性时，返回焦点的方法非常方便。注意，此属性优先于指定返回焦点元素的其他方法。
</p>
<h4 id="auto-return-focus" class="bv-no-focus-ring"><span class="bd-content-title">自动返回焦点<a class="anchorjs-link" href="#auto-return-focus" aria-labelledby="auto-return-focus"></a></span></h4>
<p>
  当通过元素的<code translate="no" class="notranslate text-nowrap">v-b-modal</code>指令打开<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>时，<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>
  关闭时焦点将自动返回到该元素，除非通过<code translate="no" class="notranslate text-nowrap">返回焦点</code>属性指定了元素。
</p>
<h4 id="specify-return-focus-via-event" class="bv-no-focus-ring"><span class="bd-content-title">通过事件指定返回焦点<a class="anchorjs-link" href="#specify-return-focus-via-event" aria-labelledby="specify-return-focus-via-event"></a></span></h4>
<p>
  使用<code translate="no" class="notranslate text-nowrap">bv::show::modal</code>事件（在<code translate="no" class="notranslate text-nowrap">$root</code>上发出）时，
  可以指定第二个参数，该参数是要返回焦点的元素。此参数接受与<code translate="no" class="notranslate text-nowrap">返回焦点</code>属性相同的类型。
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::modal'</span>, <span class="hljs-string">'modal-1'</span>, <span class="hljs-string">'#focusThisOnClose'</span>)</pre></figure>
<p><em>Tip:</em> if using a click event (or similar) to trigger modal to open, pass the event's <code translate="no" class="notranslate text-nowrap">target</code> property:</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"$root.$emit('bv::show::modal', 'modal-1', $event.target)"</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意:</strong> 
  如果<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>设置了<code translate="no" class="notranslate text-nowrap">返回焦点</code>属性，则通过事件指定的元素将被忽略。
</p>
<h3 id="keyboard-navigation" class="bv-no-focus-ring"><span class="bd-content-title">键盘导航<a class="anchorjs-link" href="#keyboard-navigation" aria-labelledby="keyboard-navigation"></a></span></h3>
<p>
  当在<code translate="no" class="notranslate text-nowrap">&lt;b-modal&gt;</code>中的元素之间切换时，如果focus试图将该模式保留到文档中，则它将返回到模式中。
</p>
<p>
  避免将模式中元素的<code translate="no" class="notranslate text-nowrap">tabindex</code>设置为除<code translate="no" class="notranslate text-nowrap">0</code>或
  <code translate="no" class="notranslate text-nowrap">-1</code>之外的任何值。这样做将使依赖辅助技术的人很难导航和操作页面内容，并可能使一些元素无法通过键盘导航访问。
</p>
<p>
  如果模式之外的某些元素需要可聚焦（即对于TinyMCE），可以将它们作为CSS选择器添加到<code translate="no" class="notranslate text-nowrap">ignore-enforce-focus-selector</code>属性
  <span class="badge badge-secondary">2.4.0+</span>，例如：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span>
  <span class="hljs-attr">id</span>=<span class="hljs-string">"some-modal-id"</span>
  <span class="hljs-attr">title</span>=<span class="hljs-string">"Modal with TinyMCE Editor"</span>
  <span class="hljs-attr">ignore-enforce-focus-selector</span>=<span class="hljs-string">".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root"</span>
&gt;</span>
  <span class="hljs-comment">&lt;!-- Modal content with TinyMCE editor here --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span></pre></figure>
<p>
  在某些情况下，可能需要完全禁用“强制聚焦”功能。您可以通过设置属性 <code translate="no" class="notranslate text-nowrap">no-enforce-focus</code>来实现这一点，
  尽管出于可访问性的原因，这是非常不可取的。
</p>
<h3 id="v-b-modal-directive-accessibility" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-b-modal</code> 指令可访问性 <a class="anchorjs-link" href="#v-b-modal-directive-accessibility" aria-labelledby="v-b-modal-directive-accessibility"></a></span></h3>
<p>
  关于 <code translate="no" class="notranslate text-nowrap">v-b-modal</code>指令可访问性的说明：
</p>
<ul>
<li>
  如果元素不是<code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>（或呈现<code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>的组件），
  则ARI<code translate="no" class="notranslate text-nowrap">角色</code>将设置为<code translate="no" class="notranslate text-nowrap">button</code>，
  并将添加<kbd class="notranslate" translate="no">ENTER</kbd>和<kbd class="notranslate" translate="no">SPACE</kbd>的keydown事件监听器以及<code translate="no" class="notranslate text-nowrap">click</code>监听器。
</li>
<li>
  如果元素不是<code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>或 
  <code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>（或呈现两者的组件），
  那么将向元素添加<code translate="no" class="notranslate text-nowrap">0</code>的<code translate="no" class="notranslate text-nowrap">tabindex</code>以确保可访问性，
  除非已经设置了<code translate="no" class="notranslate text-nowrap">tabindex</code>。
</li>
</ul>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/modal#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-modal" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-modal&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/modal#comp-ref-b-modal" class="anchorjs-link" aria-labelledby="comp-ref-b-modal" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/modal/modal.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-modal-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-modal&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-modal-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-modal&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-modal-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-modal&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-modal-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-modal&gt;</code> 事件 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-modal-rootEventListeners"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-modal&gt;</code> <code data-v-866a22e8="" translate="translate" class="notranslate">$root</code> 事件侦听器 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-modal-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/modal#comp-ref-b-modal-props" class="anchorjs-link" aria-labelledby="comp-ref-b-modal-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2718">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__2718__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="size" class="" id="__BVID__2718__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'md'</code></td>
<td aria-colindex="4" role="cell" class="">设置模式宽度的大小sm、md（默认）、“lg”或“xl”</td>
</tr>
<tr role="row" data-pk="centered" class="" id="__BVID__2718__row_centered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">centered</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在视口中垂直居中模式</td>
</tr>
<tr role="row" data-pk="scrollable" class="" id="__BVID__2718__row_scrollable">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">scrollable</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">启用模式体的滚动</td>
</tr>
<tr role="row" data-pk="button-size" class="" id="__BVID__2718__row_button-size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button-size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">内置页脚按钮的大小：“sm”、“md”（默认）或“lg”</td>
</tr>
<tr role="row" data-pk="no-stacking" class="" id="__BVID__2718__row_no-stacking">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-stacking</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">防止其他模态叠加在这个模态上</td>
</tr>
<tr role="row" data-pk="no-fade" class="" id="__BVID__2718__row_no-fade">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-fade</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件上的淡入动画/过渡</td>
</tr>
<tr role="row" data-pk="no-close-on-backdrop" class="" id="__BVID__2718__row_no-close-on-backdrop">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-close-on-backdrop</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">通过单击背景禁用关闭模式的功能</td>
</tr>
<tr role="row" data-pk="no-close-on-esc" class="" id="__BVID__2718__row_no-close-on-esc">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-close-on-esc</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">通过按ESC键禁用关闭模式的功能</td>
</tr>
<tr role="row" data-pk="no-enforce-focus" class="" id="__BVID__2718__row_no-enforce-focus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-enforce-focus</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用强制焦点例程，该例程在模式中维护焦点</td>
</tr>
<tr role="row" data-pk="ignore-enforce-focus-selector" class="" id="__BVID__2718__row_ignore-enforce-focus-selector">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ignore-enforce-focus-selector</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.4.0+</span></td>
<td aria-colindex="2" role="cell" class="">Array or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">忽略强制焦点例程中由css选择器指定的某些元素</td>
</tr>
<tr role="row" data-pk="title" class="" id="__BVID__2718__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在标题中的文本内容</td>
</tr>
<tr role="row" data-pk="title-html" class="" id="__BVID__2718__row_title-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在标题中的HTML字符串内容。慎用</td>
</tr>
<tr role="row" data-pk="title-tag" class="" id="__BVID__2718__row_title-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'h5'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是标题的默认标记</td>
</tr>
<tr role="row" data-pk="title-class" class="" id="__BVID__2718__row_title-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于标题的CSS类</td>
</tr>
<tr role="row" data-pk="title-sr-only" class="" id="__BVID__2718__row_title-sr-only">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title-sr-only</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将标题包装在“.sr only”包装中</td>
</tr>
<tr role="row" data-pk="aria-label" class="" id="__BVID__2718__row_aria-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-label</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  为模态显式提供“aria label”属性。应在模态没有标题时设置。如果未设置“aria labelledby”，则会指向模态的标题</td>
</tr>
<tr role="row" data-pk="header-bg-variant" class="" id="__BVID__2718__row_header-bg-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-bg-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于标题背景</td>
</tr>
<tr role="row" data-pk="header-border-variant" class="" id="__BVID__2718__row_header-border-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-border-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于标题边框</td>
</tr>
<tr role="row" data-pk="header-text-variant" class="" id="__BVID__2718__row_header-text-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-text-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将引导主题颜色变体之一应用于标题文本</td>
</tr>
<tr role="row" data-pk="header-close-variant" class="" id="__BVID__2718__row_header-close-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-close-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于标题关闭按钮的文本主题颜色变体</td>
</tr>
<tr role="row" data-pk="header-class" class="" id="__BVID__2718__row_header-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于“.modal header”包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="body-bg-variant" class="" id="__BVID__2718__row_body-bg-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">body-bg-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于主体背景</td>
</tr>
<tr role="row" data-pk="body-text-variant" class="" id="__BVID__2718__row_body-text-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">body-text-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将引导主题颜色变体之一应用于正文文本</td>
</tr>
<tr role="row" data-pk="modal-class" class="" id="__BVID__2718__row_modal-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于“.modal”包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="dialog-class" class="" id="__BVID__2718__row_dialog-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dialog-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于“.modal dialog”包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="content-class" class="" id="__BVID__2718__row_content-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">content-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于“.modal content”包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="body-class" class="" id="__BVID__2718__row_body-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">body-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于“.modal body”包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="footer-bg-variant" class="" id="__BVID__2718__row_footer-bg-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">footer-bg-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于页脚背景</td>
</tr>
<tr role="row" data-pk="footer-border-variant" class="" id="__BVID__2718__row_footer-border-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">footer-border-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于页脚边框</td>
</tr>
<tr role="row" data-pk="footer-text-variant" class="" id="__BVID__2718__row_footer-text-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">footer-text-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于页脚文本</td>
</tr>
<tr role="row" data-pk="footer-class" class="" id="__BVID__2718__row_footer-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">footer-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于“.modal footer”包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="hide-header" class="" id="__BVID__2718__row_hide-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-header</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用模式头的呈现</td>
</tr>
<tr role="row" data-pk="hide-footer" class="" id="__BVID__2718__row_hide-footer">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-footer</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用模式页脚的呈现</td>
</tr>
<tr role="row" data-pk="hide-header-close" class="" id="__BVID__2718__row_hide-header-close">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-header-close</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用模式头的“关闭”按钮的呈现</td>
</tr>
<tr role="row" data-pk="hide-backdrop" class="" id="__BVID__2718__row_hide-backdrop">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-backdrop</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用模式背景的呈现</td>
</tr>
<tr role="row" data-pk="ok-only" class="" id="__BVID__2718__row_ok-only">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ok-only</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用呈现默认页脚取消按钮</td>
</tr>
<tr role="row" data-pk="ok-disabled" class="" id="__BVID__2718__row_ok-disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ok-disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将默认页脚“确定”按钮置于禁用状态</td>
</tr>
<tr role="row" data-pk="cancel-disabled" class="" id="__BVID__2718__row_cancel-disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cancel-disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将默认页脚取消按钮置于禁用状态</td>
</tr>
<tr role="row" data-pk="visible" class="" id="__BVID__2718__row_visible">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">visible</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">模态的当前可见性状态</td>
</tr>
<tr role="row" data-pk="return-focus" class="" id="__BVID__2718__row_return-focus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">return-focus</code></td>
<td aria-colindex="2" role="cell" class="">HTMLElement or String or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  当模式关闭时返回焦点的HTML元素引用、CSS选择器或组件引用。如果未设置，则将焦点返回到模式打开之前最后具有焦点的元素</td>
</tr>
<tr role="row" data-pk="header-close-content" class="" id="__BVID__2718__row_header-close-content">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-close-content</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'&amp;times;'</code></td>
<td aria-colindex="4" role="cell" class="">标题关闭按钮的内容</td>
</tr>
<tr role="row" data-pk="header-close-label" class="" id="__BVID__2718__row_header-close-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-close-label</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Close'</code></td>
<td aria-colindex="4" role="cell" class="">标题关闭按钮上的“aria label”值</td>
</tr>
<tr role="row" data-pk="cancel-title" class="" id="__BVID__2718__row_cancel-title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cancel-title</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Cancel'</code></td>
<td aria-colindex="4" role="cell" class="">要放置在默认页脚取消按钮中的文本字符串</td>
</tr>
<tr role="row" data-pk="cancel-title-html" class="" id="__BVID__2718__row_cancel-title-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cancel-title-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在默认页脚取消按钮中的HTML字符串。慎用</td>
</tr>
<tr role="row" data-pk="ok-title" class="" id="__BVID__2718__row_ok-title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ok-title</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'OK'</code></td>
<td aria-colindex="4" role="cell" class="">要放置在默认页脚中的文本字符串“确定”按钮</td>
</tr>
<tr role="row" data-pk="ok-title-html" class="" id="__BVID__2718__row_ok-title-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ok-title-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在默认页脚“确定”按钮中的HTML字符串。慎用</td>
</tr>
<tr role="row" data-pk="cancel-variant" class="" id="__BVID__2718__row_cancel-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cancel-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'secondary'</code></td>
<td aria-colindex="4" role="cell" class="">应用于默认页脚取消按钮的按钮颜色主题变量</td>
</tr>
<tr role="row" data-pk="ok-variant" class="" id="__BVID__2718__row_ok-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ok-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'primary'</code></td>
<td aria-colindex="4" role="cell" class="">按钮颜色主题变量应用于默认页脚“确定”按钮</td>
</tr>
<tr role="row" data-pk="lazy" class="" id="__BVID__2718__row_lazy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当模态设置了“static”属性时，将惰性地呈现模态内容</td>
</tr>
<tr role="row" data-pk="busy" class="" id="__BVID__2718__row_busy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">busy</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将内置的默认页脚“确定”和“取消”按钮置于禁用状态</td>
</tr>
<tr role="row" data-pk="static" class="" id="__BVID__2718__row_static">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">static</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在DOM中就地呈现组件的内容，而不是将其移植到body元素中</td>
</tr>
<tr role="row" data-pk="auto-focus-button" class="" id="__BVID__2718__row_auto-focus-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">auto-focus-button</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">指定模式打开后要聚焦的内置按钮：“确定”、“取消”或“关闭”</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-warning">
<p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">警告:</strong> 
  当传递原始用户提供的值时，支持HTML字符串（<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>）的属性可能容易受到<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> 跨站点脚本 (XSS) attacks</a>
  攻击。必须先正确<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization" class="alert-link"> 清理 </a>用户输入！
</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-modal-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/modal#comp-ref-b-modal-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-modal-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__2783">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">visible</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-modal-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/modal#comp-ref-b-modal-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-modal-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2792">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="modal-header" class="" id="__BVID__2792__row_modal-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-header</code></td>
<td aria-colindex="2" role="cell" class="">整个模式头容器内容。同时删除右上角的“X关闭”按钮。可选范围。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="modal-title" class="" id="__BVID__2792__row_modal-title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-title</code></td>
<td aria-colindex="2" role="cell" class="">模态标题。如果使用了模态头槽，则不会显示此槽。可选范围。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="modal-footer" class="" id="__BVID__2792__row_modal-footer">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-footer</code></td>
<td aria-colindex="2" role="cell" class="">模式页脚内容。同时删除默认的“确定”和“取消”按钮。可选范围。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="modal-header-close" class="" id="__BVID__2792__row_modal-header-close">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-header-close</code></td>
<td aria-colindex="2" role="cell" class="">模式标题关闭按钮的内容。如果使用了模态头槽，则不会显示此槽。</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="modal-ok" class="" id="__BVID__2792__row_modal-ok">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-ok</code></td>
<td aria-colindex="2" role="cell" class="">模式确定按钮内容。</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="modal-cancel" class="" id="__BVID__2792__row_modal-cancel">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-cancel</code></td>
<td aria-colindex="2" role="cell" class="">模式取消按钮内容。</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="modal-backdrop" class="" id="__BVID__2792__row_modal-backdrop">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modal-backdrop</code></td>
<td aria-colindex="2" role="cell" class="">模式背景内容。</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="default" class="" id="__BVID__2792__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">default</code></td>
<td aria-colindex="2" role="cell" class="">情态体的内容。可选范围。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-modal-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/modal#comp-ref-b-modal-events" class="anchorjs-link" aria-labelledby="comp-ref-b-modal-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2809">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="change" class="" id="__BVID__2809__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">isVisible</code> - <span data-v-866a22e8="">如果模态可见，则为true；否则为false</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">新模态可见性状态。用于更新v模型</td>
</tr>
<tr role="row" data-pk="show" class="" id="__BVID__2809__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvModalEvt.preventDefault（）取消显示</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">总是在模态显示之前发出。可取消</td>
</tr>
<tr role="row" data-pk="shown" class="" id="__BVID__2809__row_shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">shown</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">显示模态时始终发出</td>
</tr>
<tr role="row" data-pk="hide" class="" id="__BVID__2809__row_hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvModalEvt.preventDefault（）取消隐藏</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">总是在模态隐藏之前发出。可取消（只要模态没有被强制隐藏）</td>
</tr>
<tr role="row" data-pk="hidden" class="" id="__BVID__2809__row_hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hidden</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">总是在模态被隐藏后发出</td>
</tr>
<tr role="row" data-pk="ok" class="" id="__BVID__2809__row_ok">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">ok</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvModalEvt.preventDefault（）取消隐藏</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当按下默认的OK按钮时，就在模态隐藏之前。可取消</td>
</tr>
<tr role="row" data-pk="cancel" class="" id="__BVID__2809__row_cancel">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">cancel</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvModalEvt.preventDefault（）取消隐藏</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当按下默认的取消按钮时，就在模态隐藏之前。可取消</td>
</tr>
<tr role="row" data-pk="close" class="" id="__BVID__2809__row_close">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">close</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvModalEvt.preventDefault（）取消隐藏</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当按下默认的标题关闭按钮时，就在模态隐藏之前。可取消</td>
</tr>
<tr role="row" data-pk="bv::modal::show" class="" id="__BVID__2809__row_bv::modal::show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::modal::show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvEvt.preventDefault（）取消显示</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">modalId</code> - <span data-v-866a22e8="">modal ID</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当modal即将显示时在$root上发出。可取消</td>
</tr>
<tr role="row" data-pk="bv::modal::shown" class="" id="__BVID__2809__row_bv::modal::shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::modal::shown</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">modalId</code> - <span data-v-866a22e8="">modal ID</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">显示modal时在$root上发出</td>
</tr>
<tr role="row" data-pk="bv::modal::hide" class="" id="__BVID__2809__row_bv::modal::hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::modal::hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象。调用bvEvt.preventDefault（）取消隐藏</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">modalId</code> - <span data-v-866a22e8="">modal ID</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当modal即将隐藏时在$root上发出。可取消（只要模态没有被强制隐藏）</td>
</tr>
<tr role="row" data-pk="bv::modal::hidden" class="" id="__BVID__2809__row_bv::modal::hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::modal::hidden</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvModalEvt</code> - <span data-v-866a22e8="">BvModalEvent对象</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">modalId</code> - <span data-v-866a22e8="">modal ID</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">隐藏模态时在$root上发出</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-modal-rootEventListeners" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate">$root</code>事件侦听器 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/modal#comp-ref-b-modal-rootEventListeners" class="anchorjs-link" aria-labelledby="comp-ref-b-modal-rootEventListeners" target="_self"></a></span></h4>
<p data-v-866a22e8=""> 
  您可以通过在<samp data-v-866a22e8="" translate="translate" class="notranslate">$root</samp>上发出以下事件来控制<code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-modal&gt;</code>：
</p>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2830">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="bv::show::modal" class="" id="__BVID__2830__row_bv::show::modal">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::show::modal</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modalId</code> <span data-v-866a22e8=""> - 要显示的模态ID</span></p>
<p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">elIDtoFocusOnClose</code> <span data-v-866a22e8=""> - (可选择的),指定元素引用或CSS选择器，以便在关闭模式后将焦点返回到</span></p></td>
<td aria-colindex="3" role="cell" class="">在$root上发出此事件时，显示具有指定ID的模态</td>
</tr>
<tr role="row" data-pk="bv::hide::modal" class="" id="__BVID__2830__row_bv::hide::modal">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::hide::modal</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modalId</code> <span data-v-866a22e8=""> - 要隐藏的模态ID</span></p></td>
<td aria-colindex="3" role="cell" class="">在$root上发出此事件时隐藏具有指定ID的模态</td>
</tr>
<tr role="row" data-pk="bv::toggle::modal" class="" id="__BVID__2830__row_bv::toggle::modal">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::toggle::modal</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">modalId</code> <span data-v-866a22e8=""> - 切换可见性的模态ID</span></p>
<p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">elIDtoFocusOnClose</code> <span data-v-866a22e8=""> - (可选择的), 指定元素引用或CSS选择器，以便在关闭模式后将焦点返回到</span></p></td>
<td aria-colindex="3" role="cell" class="">根据模态的ID切换其可见性</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/modal#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2843">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-modal&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BModal</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BModal } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-modal'</span>, BModal)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-individual-directives" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个指令<a href="../../../bootstrap-vue/docs/components/modal#importing-individual-directives" class="anchorjs-link" aria-labelledby="importing-individual-directives" target="_self"></a></span></h3>
<p>可以通过以下命名导出将单个指令导入到项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2853">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">指令</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名导出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">v-b-modal</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">VBModal</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { VBModal } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
<span class="hljs-comment">// Note: Vue automatically prefixes the directive name with 'v-'</span>
Vue.directive(<span class="hljs-string">'b-modal'</span>, VBModal)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/modal#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p>这个插件包括上面列出的所有单个组件和指令。插件还包括任何组件别名。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__2863">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">ModalPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p>此插件还自动包含以下插件：</p>
<ul>
<li><code translate="translate" class="notranslate">BVModalPlugin</code></li>
</ul>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { ModalPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(ModalPlugin)</pre></figure>







</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
